<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

</head>

<body>
    <div class="id">

    </div>
    <script>
        let app = new Vue({

            template: `<h1>{{name}},{{releaseTime}},{{1+1}},主角是{{lead.name}}
                其他演员包括{{actor[0].name}},{{actor[0].age}},{{actor[1].name}}
                
                </h1>`,
            /*
           模版语句的数据来源：data选项
             1. data选项的类型是什么？ Object | function（对象或者是函数）
             2. data配置项的专业叫法？ Vue实例的数据对象 （data实际上就是给整个Vue实例提供数据来源的）
             3.data是对象的话，必须是纯粹的对象（含有零个或多个key:value对）
             4.{{}}这是Vue框架自己搞的一套语法，别的框架看不懂，浏览器也是不能识别的
             Vue框架自己是能够看懂的，被称为插值语法，有人也称为胡子语法
    
             插值语法的小细节
              {{}}，括号之间不能写其他字符包括空格
    
            */

            data: {
                name: 'kuangbiao',
                releaseTime: '2020-01-01',
                lead: {
                    name: "gaoqiqiang",
                    age: 40,
                },
                actor: [
                    {
                        name: 'anxin',
                        age: 30,
                    },
                    {
                        name: 'qilan',
                        age: 20,
                    },
                    {
                        name: 'zhaoyu',
                        age: 20,
                    },
                    {
                        name: 'zhaoyu',
                        age: 20,
                    },
                    {
                        name: 'zhaoyu',
                        age: 20,
                    },
                ]

            }

        }).$mount('.id')


    </script>
</body>

</html>